<script setup>
import { watch, ref } from "vue";
const props = defineProps({
  queryData: {
    type: Object,
    default: () => ({}),
  },
});

// 处理时间
const timeArr = ref([]);
watch(timeArr, (val) => {
  console.log(timeArr.value);
  if (timeArr.value) {
    props.queryData.create_time = val
      .map((item) => {
        item = +new Date(item);
        return item;
      })
      .join(",");
    console.log(props.queryData.create_time);
  } else {
    props.queryData.create_time = "";
  }
});

const emit = defineEmits(["updateList", "resetList"]);

// 搜索
const onSearch = () => {
  emit("updateList");
};

// 重置
const onReset = () => {
  timeArr.value = [];
  emit("resetList");
};
</script>
<template>
  <el-form inline label-position="top">
    <el-form-item label="小区名称">
      <el-input
        v-model="queryData.name"
        placeholder="请输入"
        clearable
        @clear="emit('updateList')"
      ></el-input>
    </el-form-item>
    <el-form-item label="开发商名称">
      <el-input
        v-model="queryData.developer"
        placeholder="请输入"
        clearable
        @clear="emit('updateList')"
      ></el-input>
    </el-form-item>
    <el-form-item label="物业公司名称">
      <el-input
        v-model="queryData.estate"
        placeholder="请输入"
        clearable
        @clear="emit('updateList')"
      ></el-input>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
        v-model="timeArr"
        type="datetimerange"
        start-placeholder="请选择"
        end-placeholder="请选择"
        clearable
        @clear="emit('updateList')"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="onReset">重置</el-button>
      <el-button type="primary" @click="onSearch">查询</el-button>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped></style>
